<template>
	<view class="m-shop-home-wrap">
		<view class="m-shop-home-title">
			<navigator class="m-shop-home-title-icon" open-type="switchTab" url="/pages/plat_menu/index"></navigator>
			<view class="m-shop-home-title-name">{{ shop_name }}</view>
		</view>
		<view class="m-search-wrap" @click="goSearchLink">
			<input class="m-search-inp" type="text" placeholder="搜索店内商品">
			<view class="m-search-btn">搜索</view>
		</view>
		<view class="m-banner-wrap">
			<image src="/static/m-imgs/m-banner-01.png"></image>
		</view>
		
		<swiper class="m-nav" :indicator-dots="navDots" :style="navStyle">
			<swiper-item class="m-nav-wrap" v-for="(page,pIdx) in navList" :key="pIdx">
				<view class="m-nav-item"
					v-for="(item,index) in page" :key="index"
					@click="goCategoryLink(item.name,item.sort_id)">
					<image :src="ossImg+item.pic" mode=""></image>
					<view>{{item.name}}</view>
				</view>
			</swiper-item>
		</swiper>
		
		<view class="m-shop-item-wrap">
			<view class="m-shop-item-title">
				<view class="m-shop-item-name">产品推荐</view>
				<navigator class="m-shop-item-link" 
					:url="'../shopDetail/shopDetail?store_id='+store_id">了解更多</navigator>
			</view>
			<view class="m-shop-item-info">
				<view class="m-shop-item-item" 
					v-for="(item,index) in recommand_list" :key="index"
					@click="linkToDetail(item.goods_id)">
					<image :src="item.image" mode=""></image>
					<view class="m-shop-item-item-name">{{item.name}}</view>
					<view class="m-shop-item-item-count">已售{{item.sell_count}}</view>
					<view class="m-shop-item-item-price">
						<text class="m-small">￥</text>
						<text>{{item.price}}/{{item.unit}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="m-shop-hot">
			<view class="m-shop-hot-title">
				<image src="/static/m-imgs/m-icon-hot.png"></image>
				<text>热销产品</text>
			</view>
			<view class="m-shop-hot-info">
				<view class="m-shop-hot-item" 
					v-for="(item,index) in sellCountList" :key="index"
					@click="linkToDetail(item.goods_id)">
					<image :src="item.image.indexOf(oss) == -1 ? oss + item.image: item.image" mode=""></image>
					<view class="m-shop-item-item-name">{{item.name}}</view>
					<view class="m-shop-item-item-price m-hot-price">
						<text class="m-small">￥</text>
						<text>{{item.price}}/{{item.unit}}</text>
					</view>
					<view class="m-shop-item-item-count m-hot-count">已售{{item.sell_count}}</view>
				</view>
			</view>
		</view>
		<view class="m-shop-nav-wrap">
			<navigator url="/" open-type="switchTab" >
				<image src="/static/m-imgs/m-icon-home.png" mode=""></image>
				<view>首页</view>
			</navigator>
			<navigator :url="'../shopDetail/shopDetail?store_id='+store_id">
				<image src="/static/m-imgs/m-icon-categary.png" mode=""></image>
				<view>分类</view>
			</navigator>
			<navigator url="../cart/cart">
				<image src="/static/m-imgs/m-icon-car.png" mode=""></image>
				<view>购物车</view>
			</navigator>
			<navigator url="/pages/plat_menu/my" open-type="switchTab">
				<image src="/static/m-imgs/m-icon-my.png" mode=""></image>
				<view>我的</view>
			</navigator>
		</view>
		
	</view>
</template>

<script>
	import common from '../../../utils/common.js';
	import{ array2Two } from '../../../utils/mf.js'
		
	export default{
		data(){
			return {
				oss:'https://jlmkkj.oss-accelerate.aliyuncs.com',
				ossImg:'https://jlmkkj.oss-accelerate.aliyuncs.com/upload/slider/',
				shop_name:'',
				store_id:'',
				recommand_list:[],
				sellCountList:[],
				navList:[],
				navStyle:'',
				navDots:false,
			}
		},
		onLoad(option){
			let store_id = option.store_id
			if(store_id){
				this.store_id = store_id
			}
			this.getShopInfo()
			this.getSaleList()
			this.getStoreIndexNav()
		},
		methods:{
			getShopInfo(){
				var param = {
					store_id: this.store_id,
					lng: '',
					lat: ''
				}
				common.post('Shop_new&a=ajax_shop', param, data => {
					// 页面标题
					const name = data.name
					this.shop_name = name
					// 产品推荐
					const recommand_list = data.cat_discount.good_list
					this.recommand_list = recommand_list.slice(0,3)
				})
			},
			getSaleList(){
				const param = {
					store_id: this.store_id
				}
				common.post('Shop_new&a=getGoodBySaleCount',param,data=>{
					this.sellCountList = data
				})
			},
			linkToDetail(goods_id){
				const scUrl = "../goodsDetail/goodsDetail"
				uni.navigateTo({
					url:`${scUrl}?store_id=${this.store_id}&product_id=${goods_id}`
				})
			},
			goSearchLink(){
				uni.navigateTo({
					url: `/pages/shop_new/goodsSearch/goodsSearch?store_id=${this.store_id}`
				})
			},
			goCategoryLink(sort_name,sort_id){
				const name = encodeURIComponent(sort_name)
				uni.navigateTo({
					url:`/pages/shop_new/shopDetail/shopDetail?store_id=${this.store_id}&sort_id=${sort_id}&name=${name}`
				})
			},
			getStoreIndexNav(){
				const param = {
					store_id: this.store_id
				}
				common.post('Shop_new&a=getStoreIndexNav',param,data=>{
					if(!data) return
					this.afterGetIndexNavData(data)
				})
			},
			afterGetIndexNavData(data){
				const len = data.length
				const pageNum = 10
				const _itemHeight = 160
				const dotsPadding = 20
				const _height = len < pageNum/2 ? _itemHeight : _itemHeight *2 + dotsPadding
				
				if(len > pageNum){
					this.navDots = true
				}
				
				// #ifdef H5
				this.navStyle = `height:${_height}upx`
				// #endif
				
				// #ifdef MP-WEIXIN
				this.navStyle = `height:${_height}rpx`
				// #endif
				
				this.navList = array2Two(data,pageNum)
			}
		},
		
	}
</script>

<style lang="scss">
	@import './shop-index.scss';
</style>